{% extends 'base.html' %}

{% block head %}
    <title>老师管理</title>
{% endblock head %}

{% block style %}
    table{
        margin: 0 auto;
        margin-top:20px;
        width: 800px;
    }
    th{
        border: solid #666 1px;
    }
    td{
        border: solid #666 1px;
        text-align: center;
    }
    .page-link{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .page-link a{
        margin:0 5px;
        border: solid #999 1px;
        text-decoration: none;
        display: inline-block;
        width: 20px;
        height: 30px;
    }
{% endblock style %}

{% block right %}
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>手机号码</th>
            <th>所带班级</th>
            <th>操作</th>
        </tr>
        {% for i in teacher %}
            <tr>
                <td name="name">{{ i.name }}</td>
                <td name="sex">{{ i.sex }}</td>
                <td name="phonenum">{{ i.phonenum }}</td>
                {% load mytags %}
                <td name="classes">
                    {% for j in i.classes|getall %}
                        {{ j.name }}
                    {% endfor %}
                </td>
                <td>
                    <a class="edit" style="cursor: pointer;">编辑</a> | <a class="del" style="cursor: pointer;">删除</a>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="page-link" style="margin-top: 10px;">
        {{ pagenum|safe }}
    </div>
{% endblock right %}

{% block dialog %}
    <div id="input-box" class="hide" style="margin-top: 20px;">
        <p>姓名<input name="name"></p>
        <p>性别<input name="sex"></p>
        <p style="margin-right: 24px;">手机号码<input name="phonenum"></p>
        <p style="margin-right: 78px;">
            <span style="vertical-align: top">所带班级</span>
            <select name="classes" multiple="multiple"></select>
        </p>
    </div>

    <div id="bt-box" class="hide" style="margin-top: 20px;">
        <button name='confirm' style="height: 40px;width: 80px;margin-right: 50px;">确定</button>
        <button name='cancle' style="height: 40px;width: 80px;">取消</button>
    </div>
{% endblock dialog %}

{% block js %}
    $('#teacher').addClass('leftA-active')
    var clsName;
    var recordId;
    var postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'};
    if ('{{ usrname }}' != 'root'){
        $('.del').click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
        $('.edit').click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass(" fa fa-warning fa-lg");
            $(".dlg-text").text("对不起，您没有操作权限！")
        })
    }
    else{
        $('.del').click(function(){
            clsName = $(this).parent().prevAll("td[name='name']").text();
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#bt-box").removeClass('hide');
            $("#input-box").addClass("hide");
            $(".dlg-title").text("提示");
            $(".icon").addClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("确定删除"+clsName+"?");
            $(".dlg-text").css("font-size", "16px");
            postData.op = 'del';
            postData.name = clsName;
        });

        $("button[name='confirm']").click(function(){
            $("#bt-box").addClass('hide');
            $("#input-box").addClass("hide");
            var clsdata = {};
            if (postData.op != 'del'){
                postData = {'csrfmiddlewaretoken':'{{ csrf_token }}'};
                $("#input-box input").each(function(){
                    clsdata[$(this).attr('name')] = $(this).val()
                });
                var clas = [];
                $("select[name='classes'] option:selected").each(function(){
                    clas.push($(this).text())
                });
                clsdata.classes = clas;
                clsdata.id = recordId;
                postData.op = 'editTeacher';
                postData.clsdata = JSON.stringify(clsdata);
            }
            $.post("/clsoperation/",postData,function(data){
                if (data=='OK'){
                    $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
                    $(".icon").addClass("fa  fa-check-circle-o fa-2x");
                    $(".dlg-text").text("操作成功");
                    $(".closedlg").click(function(){
                        window.location.reload();
                    });
                }
                else{
                    $(".dlg-text").text("操作失败");
                }
            })
        });
        $("button[name='cancle']").click(function(){
            $(".shade").addClass("hide");
            $(".dialog").addClass("hide");
        });

        $(".edit").click(function(){
            $(".shade").removeClass("hide");
            $(".dialog").removeClass("hide");
            $("#bt-box").removeClass("hide");
            $("#input-box").removeClass("hide");
            $(".dlg-title").text("请填写信息");
            $(".dialog").css('height','300px');
            $(".icon").removeClass("fa fa-exclamation-triangle fa-2x");
            $(".dlg-text").text("");
            clsName = $(this).parent().prevAll("td[name='name']").text();
            postData.op = 'getCls';
            postData.name = clsName;
            $.post("/clsoperation/",postData,function(data){
                var obj = JSON.parse(data);
                $("select[name='classes']")[0].options.length = 0;
                for (var i in obj.clas){
                    option = document.createElement('option');
                    option.innerHTML = obj.clas[i];
                    $("select[name='classes']").append(option)
                }
                recordId = obj.id
            });
            $(this).parent().prevAll().each(function(){
                $("input[name="+$(this).attr('name')+"]").val($(this).text());  {# 将表格中的内容填入input框中 #}
            })
        });
    }
{% endblock js %}